import React, { Component } from 'react';
import { NavBar,List } from 'antd-mobile'
// import jdhead from '../../assets/jdhead.png'
import '../../styles/Indexs/My.scss'
import * as service from '../../api/index'
class My extends Component {
    constructor(props) {
        super(props)
            this.state={
                token:localStorage.getItem('token'),
                userid:localStorage.getItem('userid'),
                navlist:[
                    {text:'全部订单',icon:'icon-31quanbushangpin'},
                    {text:'待付款',icon:'icon-daifukuan'},
                    {text:'待收货',icon:'icon-daifahuo'},
                    {text:'待评价',icon:'icon-daipingjia'},            
                ],
                username:''
            }
       
    }
    async componentDidMount(){
         var res = await service.user_info({userid:this.state.userid})
         this.setState({username:res.data.data[0].username})
    }
    gologin(){//去登陆页面
        this.props.history.push('/login')
    }
    gouseraddress(){//去地址页面
        this.props.history.push({ pathname:'/useraddress',state:{status:1}})
    }
    gosetuser(){//去修改用户名界面
        this.props.history.push('/setuser')
    }
    gouserorder(){//去订单页面
        this.props.history.push('/userorder')
    }
    soucangaddress(){
        this.props.history.push('/Collection')
    }
    nameshow(){
        if(localStorage.getItem('token')){
            return ''
        }else{
            return '请登录'
        }
    }
    picshow(){
        if(localStorage.getItem('token')){
            return 'https://img1.baidu.com/it/u=1403245892,3051757811&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        }else{
            return 'https://hbimg.huabanimg.com/03445c61d3439ec9ace62e7ca1d634bfaaf6f2d6a424-xqgSgd_fw658'
        }
    }
    render() {
        return (
            <div className='my' >
                <div className='header' >
                    <NavBar 
                       right={ <span onClick={()=>{this.gosetuser()}}   className='iconfont icon-ziyuanxhdpi'></span> } 
                       onBack={() => {  }}>
                        个人中心
                    </NavBar>
                </div>
                <div className="top">
                    <div className="img">
                        <img src={this.picshow()} alt="" />
                    </div>
                    <div className="text">
                        {
                            this.state.username ? this.state.username :'京东用户'
                        }
                    </div>
                    <div className="login" onClick={()=>{this.gologin()}} >
                       {this.nameshow()}
                    </div>
                </div>
                <div className="my_main">
                    <div className="main-nav">
                        {
                            this.state.navlist.map((item,index)=>{
                                return(
                                   <div className="nav-item" key={index} onClick={()=>{this.gouserorder(index)}} >
                                       <span className={`iconfont ` + item.icon} ></span>
                                       <div className="navlist_text">{item.text}</div>
                                   </div>
                                )
                            })
                    
                        }
                    </div>
                    <List >
                        <List.Item onClick={() => {this.gouseraddress() }}>
                            地址管理
                        </List.Item>
                        <List.Item  onClick={() => { this.soucangaddress()}}>
                            我的收藏夹
                        </List.Item>
                        <List.Item  onClick={() => { }}>
                            关于我们
                        </List.Item>
                    </List>
                
                </div>
            </div>
        );
    }
}

export default My;